<template>
  <!-- 资源查看 -->
  <div class="app-container">
    <div class="mainbox">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item>
          <el-input v-model.trim="query.resourceName" maxlength="30" clearable
                    placeholder="资源名称" />
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="query.url" clearable placeholder="请求url" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="querySearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="table" :data="list" style="width: 100%"
                :header-cell-style="headerCellStyle">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="resourceName" min-width="200" show-overflow-tooltip
                         label="资源名称" />
        <el-table-column prop="resourceCode" min-width="150" show-overflow-tooltip
                         label="资源编码" />
        <el-table-column prop="modularName" min-width="150" label="模块名称" />
        <el-table-column prop="viewFlag" label="是否视图" :formatter="typeTransition" />
        <el-table-column prop="url" label="请求url" show-overflow-tooltip
                         min-width="200" />
        <el-table-column prop="httpMethod" label="http方法" />
        <el-table-column prop="requiredLoginFlag" label="是否登录" :formatter="typeTransition" />
        <el-table-column prop="requiredPermissionFlag" min-width="150" label="需要权限验证"
                         :formatter="typeTransition" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-permission="['AUTH_RESOURCE_DETAIL_BUTTON']"
              size="mini"
              @click="handleEdit(scope.row.resourceCode)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <!-- 分页器 -->
        <dt-pagination
          v-show="page.total > 0"
          :total="page.total"
          :page.sync="page.current"
          :limit.sync="page.size"
          @pagination="fetchData"
        />
        <!-- <el-pagination
          :current-page="page.current"
          :page-sizes="[10,20, 50, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </div>

      <Edit :title="edit.title" :visible="edit.visible" :form-data="edit.formData"
            :close-form="closeForm" />
    </div>
  </div>
</template>

<script>
import api from '@/framework/api/resource'
import Edit from './resourceEdit'

export default {
  name: 'AuthResource',
  components: {
    Edit
  },
  data() {
    return {
      list: [],
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      query: {},
      edit: {
        title: '',
        visible: false,
        formData: {}
      },
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 列表获取数据
    async fetchData() {
      // this.$refs.table ? this.$refs.table.bodyWrapper.scrollTop = 0 : null
      if (this.$refs.table) {
        this.$refs.table.$el.scrollTop = 0
      }
      const params = {
        pageNo: this.page.current,
        pageSize: this.page.size,
        resourceName: this.query.resourceName,
        url: this.query.url
      }
      const res = await api.fetchList(params)
      this.list = res.data.rows
      this.page.total = res.data.totalRows
    },
    // 编辑按钮
    async handleEdit(id) {
      const res = await api.getResourceById(id)
      if (res.code === '00000') {
        this.edit.formData = res.data
        this.edit.title = '资源详情'
        this.edit.visible = true
      } else {
        this.$message({
          showClose: true,
          message: res.message,
          type: 'error'
        })
      }
    },
    // // 改变分页条数
    // handleSizeChange(val) {
    //   this.page.size = val
    //   this.fetchData()
    // },
    // // 改变页码
    // handleCurrentChange(val) {
    //   this.page.current = val
    //   this.fetchData()
    // },
    // 查询按钮
    querySearch() {
      this.page.current = 1
      this.fetchData()
    },
    // 刷新列表 用于监听子组件新增编辑后触发
    closeForm() {
      this.edit.formData = {}
      this.edit.visible = false
      this.fetchData()
    },
    // 转换 Y N 转为 是 否
    typeTransition(row, column, cellValue) {
      if (cellValue === 'Y') {
        return '是'
      } else {
        return '否'
      }
    }
  }
}
</script>

<style scoped>

</style>
